<template>
  <div class="form-wave">
    <div class="container">
      <h1>Please Login</h1>
      <form>
        <div class="form-control">
          <input
            @focus="focus('style')"
            @blur="blur('style')"
            type="text"
            required
            v-model="value"
          />
          <label>
            <span :style="style" style="transition-delay: 0ms">E</span>
            <span :style="style" style="transition-delay: 50ms">m</span>
            <span :style="style" style="transition-delay: 100ms">a</span>
            <span :style="style" style="transition-delay: 150ms">i</span>
            <span :style="style" style="transition-delay: 200ms">l</span>
          </label>
        </div>

        <div class="form-control">
          <input
            @focus="focus('style1')"
            @blur="blur('style1')"
            type="password"
            required
            v-model="value1"
          />
          <label>
            <span :style="style1" style="transition-delay: 0ms">P</span>
            <span :style="style1" style="transition-delay: 50ms">a</span>
            <span :style="style1" style="transition-delay: 100ms">s</span>
            <span :style="style1" style="transition-delay: 150ms">s</span>
            <span :style="style1" style="transition-delay: 200ms">w</span>
            <span :style="style1" style="transition-delay: 250ms">o</span>
            <span :style="style1" style="transition-delay: 300ms">r</span>
            <span :style="style1" style="transition-delay: 350ms">d</span>
          </label>
        </div>

        <button class="btn" @click="login">Login</button>

        <p class="text">Don't have an account? <a href="#">Register</a></p>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      style: {},
      style1: {},
      value: "",
      value1: "",
    };
  },
  methods: {
    focus(key) {
      this[key] = {
        color: "lightblue",
        transform: "translateY(-30px)",
      };
    },
    blur(key) {
      let obj = {
        style: "value",
        style1: "value1",
      };
      if (!this[obj[key]]) {
        this[key] = {};
      }
    },
    login() {
      if (this.value && this.value1) {
        this.$emit("login", {
          userName: this.value,
          passWord: this.value1,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// 修改input的默认样式
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ededed !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  background-color: transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s; /*背景色透明  生效时长  过渡效果  启用时延迟的时间*/
}
input {
  background-color: transparent;
}

.form-wave {
  background-color: steelblue;
  color: #fff;
  font-family: "Muli", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  .container {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 40px;
    border-radius: 5px;
    & h1 {
      text-align: center;
      margin-bottom: 30px;
    }
    & a {
      text-decoration: none;
      color: lightblue;
    }
    .btn {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      background: lightblue;
      padding: 15px;
      font-family: inherit;
      font-size: 16px;
      border: 0;
      border-radius: 5px;
    }
    .text {
      margin-top: 30px;
    }

    .form-control {
      position: relative;
      margin: 20px 0 40px;
      width: 300px;
    }

    .form-control input {
      background-color: transparent;
      border: 0;
      border-bottom: 2px #fff solid;
      display: block;
      width: 100%;
      padding: 15px 0;
      font-size: 18px;
      color: #fff;
    }

    .form-control input:focus {
      outline: 0;
      border-bottom-color: lightblue;
    }

    .form-control label {
      position: absolute;
      top: 15px;
      left: 0;
      pointer-events: none;
    }

    .form-control label span {
      display: inline-block;
      font-size: 18px;
      min-width: 5px;
      transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  }
}
</style>